<template>
	<div class="pet-body" :style="{ height: height + 'px' }">
		<slot name="header"></slot>
		<div class="pet-content">
			<slot name="content"></slot>
		</div>
		<slot name="footer"></slot>
		<ma-login-modal ref="loginModal"></ma-login-modal>
	</div>
</template>

<script>
	export default {
		name:"ma-body",
		props:{
			// height: {
			// 	type: String,
			// 	default: '100vh'
			// }
		},
		data() {
			return {
				bottom: 0,
				height: 0
			};
		},
		mounted(){
			this.bottom = uni.getSystemInfoSync().windowBottom;
			this.height = uni.getSystemInfoSync().windowHeight;
		},
		watch: {
			//监听是否弹出登陆模态框
			['user.showLoginModal'](newVal,oldVal){
				if(newVal){
					this.$refs.loginModal.open();
				}else {
					this.$refs.loginModal.clear();
				}
			}
		}
	}
</script>

<style lang="scss">
	// .pet-body{
	// 	background: green;
	// }
	.pet-content{
		flex: 1;
	}
</style>
